<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div :style="{ height: height, width: width }" ref="chartsRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted } from 'vue'
  import { EChartsType } from 'echarts/core'
  import * as echarts from 'echarts'
  import routeComponentName from '@/config/route-component-name'

  defineOptions({
    name: routeComponentName.regularInspection.maintenanceDashboard,
  })

  const chartsRef = ref<HTMLElement | null>()

  const props = defineProps({
    className: {
      type: String,
      default: 'chart',
    },
    xAxisData: {
      type: Array,
      default: () => ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    config: {
      type: Object,
      default: () => {},
    },
    seriesData: {
      type: Array,
      default: () => [150, 230, 224, 218, 135, 147, 260],
    },
    id: {
      type: String,
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '300px',
    },
  })
  const options = {
    grid: {
      top: 10,
      left: '2%',
      right: '2%',
      bottom: '2%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: props.xAxisData,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: props.seriesData,
        type: 'line',
      },
    ],
    ...props.config,
  }
  const initChart = () => {
    const chart = echarts.init(chartsRef.value)
    chart.setOption(options)
    window.addEventListener('resize', function () {
      chart.resize()
    })
  }
  onMounted(() => {
    initChart()
  })
</script>

<style scoped lang="scss">
  @import './index';
</style>
